<template>
  <div class="login-wrap">
    <img
      src="@/assets/logo.png"
      alt
      width="150"
      height="150"
      style="margin:20px auto 0;display:block;"
    />
    <div style="padding:30px;">
      <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
      <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      <mt-button size="large" type="primary" style="margin-top:20px;" @click="clickToRegister">注册</mt-button>
    </div>
    <div style="display:flex;justify-content:center;">
      <routerLink to="/login" class="login-clickToRegister">已有账号?点击登录</routerLink>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  name: 'register',
  data() {
    return {
      username: '',
      password: '',
      email: ''
    }
  },
  methods: {
    clickToRegister() {
      if (this.username.length < 2) {
        Toast('用户名不能小于2位')
        return
      } else if (this.password.length < 2) {
        Toast('密码不能小于2位')
        return
      }
      this.$axios
        .post('/api/register', {
          username: this.username,
          password: this.password,
          email: this.email
        })
        .then(data => {
          if (data.data.code === 0) {
            Toast('注册成功,请登录')
            this.$router.push(`/login`)
          }else{
            Toast('该用户已存在')
          }
        })
    }
  }
}
</script>

<style scoped>
.login-clickToRegister {
  font-size: 20px;
  text-decoration: none;
}
</style>